<template>
  <div class="app-container">
    <wise-crud ref="wiseCrud" :urls="urls" :fields="fields" :handle="handle">
      <template v-slot:handle="slotProps">
        <el-button type="info" size="small" class="activeBtn" round @click.native.prevent="viewHandle(slotProps.row)">
          查看
        </el-button>
        <template v-if="slotProps.row.dataInfo.initiateStatus==12">
          <el-button type="primary" size="small" class="activeBtn" round
            @click.native.prevent="throughHandle(slotProps.row)">
            通过
          </el-button>
          <el-button type="danger" size="small" class="activeBtn" round
            @click.native.prevent="rejectedHandle(slotProps.row)">
            驳回
          </el-button>
        </template>

      </template>
    </wise-crud>

    <el-dialog title="查看" :visible.sync="viewDialog" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close width="40%">
      <el-form ref="ruleForm" :model="obj" :rules="rules" label-width="100px">
        <el-form-item label="企业名称" prop="enterpriseInfo">
          <!-- {{ obj.enterpriseInfo.name }} -->
          {{obj.enterpriseInfo.name}}
        </el-form-item>
        <el-form-item label="问题" prop="problemTypeName">
          {{ obj.problemTypeName }}
        </el-form-item>
        <el-form-item label="项目名称" prop="name">
          {{ obj.name }}
        </el-form-item>
        <el-form-item label="陈述" prop="depict">
          {{ obj.depict }}
        </el-form-item>
        <el-form-item v-if="obj.imageUrl" label="图片" prop="imageUrl">
          <el-image v-for="(img,i) in obj.imageUrl.split(';')" :key="i" class="image" fit="cover" alt="点击查看大图"
            :src="img|imgPath" :preview-src-list="getSrcList(obj.imageUrl)" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialog = false">取 消</el-button>
        <el-button type="primary" @click="viewDialog = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="驳回" :visible.sync="rejectedDialog" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close width="30%" @close="rejectedDialogClosed">
      <el-form ref="rejectedForm" :model="rejectedObj" :rules="rules" label-width="100px">
        <el-form-item label="驳回原因" prop="rejectReason">
          <el-input v-model="rejectedObj.rejectReason" type="textarea" :rows="5" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectedDialog = false">取 消</el-button>
        <el-button type="primary" @click="rejectedSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import WiseCrud from '../../../../components/Crud/wiseCrud'
  import {
    postHandle
  } from '../../../../api'
  import {
    imgPath
  } from '@/filters'

  export default {
    name: 'UserManage',
    components: {
      WiseCrud
    },
    data() {
      return {
        handle: [],
        urls: {
          list: '/api/v1/welder-sbtx-second/initiate-project-comb/approval-list',
          show: '/api/v1/welder-sbtx-second/initiate-project-comb/show/',
          pass: '/api/v1/welder-sbtx-second/initiate-project-comb/approval-adopt/',
          rejected: `/api/v1/welder-sbtx-second/initiate-project-comb/approval-reject/`
        },
        fields: [{
            label: '企业名称',
            prop: 'dataInfo.enterpriseInfo.name',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              return h('div', row.dataInfo.enterpriseInfo.name)
            }
          },
          //  {
          //   label: '企业名称',
          //   prop: 'name',
          //   use: ['search'],
          // },
          {
            label: '项目名称',
            prop: 'name',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              return h('div', row.dataInfo.name)
            }
          },
          {
            label: '问题',
            prop: 'dataInfo.problemTypeName',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              return h('div', row.dataInfo.problemTypeName)
            }
          },
          {
            label: '陈述',
            prop: 'dataInfo.depict',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              return h('div', row.dataInfo.depict)
            }
          },
          {
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: [],
            tableWidth: 220
          }
        ],
        roleList: [],
        rejectedDialog: false,
        obj: {
          enterpriseInfo: {
            name: ''
          }
        },
        rules: {
          rejectReason: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }]
        },
        rejectedObj: {
          rejectReason: null
        },
        approvalData: [],
        viewDialog: false,
        rejectedId: null
      }
    },
    computed: {

    },
    methods: {
      // 查看
      viewHandle({
        dataId
      }) {
        this.getObjectId(dataId)
        this.viewDialog = true
      },
      // 详情
      getObjectId(dataId) {
        postHandle(this.urls.show + dataId).then(res => {
          this.obj = res.result
        })
      },
      // 查看大图
      getSrcList(str) {
        let arr = []
        if (str) {
          arr = str.split(';')
        }
        return arr.map(item => imgPath(item))
      },
      // 驳回
      rejectedHandle(row) {
        this.rejectedId = row.id
        this.rejectedDialog = true
      },
      // 通过
      throughHandle({
        id
      }) {
        this.$confirm('您确定要审批通过吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postHandle(this.urls.pass + id).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.$refs['wiseCrud'].handleSearch(0)
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '操作失败'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      rejectedSubmit() {
        this.$refs['rejectedForm'].validate((valid) => {
          if (valid) {
            postHandle(this.urls.rejected + this.rejectedId, {
              obj: this.rejectedObj
            }).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.rejectedDialog = false
              this.$refs['wiseCrud'].handleSearch(0)
            }).catch(() => {
              this.$message({
                type: 'error',
                message: '操作失败'
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      rejectedDialogClosed() {
        this.$refs['rejectedForm'].resetFields()
      }

    }
  }
</script>

<style lang="less" scoped>
  .image {
    width: 150px;
    height: 150px;
    margin-right: 10px;
  }
</style>